<template>
    <div class="const">
        <!-- 头部部分 -->
            <van-nav-bar class="header">
                <i slot="left" class="iconfont iconzuojiantou" @click="$router.go(-1)"></i>
                <p slot="title" class="title">推荐</p>
                <i slot="right" class="iconfont iconshezhi"></i>
            </van-nav-bar>
        <!-- 标签栏 -->
        <div class="main">
            <van-tabs class="lunbo">
                <van-tab>
                        <van-image
                            :src="require('@/assets/500498028_wx.png')"
                            fit="cover"
                            slot="title"
                            class="logo"
                        />
                    </van-tab>
                    <van-tab>
                        <van-image                     
                             :src="require('@/assets/500602053_banner.png')"
                            slot="title"
                            fit="cover"
                            class="logo"
                        />
                    </van-tab>
                    <van-tab>
                        <van-image           
                             :src="require('@/assets/500146574_wx.png')"
                            slot="title"
                            fit="cover"
                            class="logo"
                        />
                    </van-tab>
                     <van-tab>
                        <van-image
                            :src="require('@/assets/500498028_wx.png')"
                            fit="cover"
                            slot="title"
                            class="logo"
                        />
                    </van-tab>
                    <van-tab>
                        <van-image                     
                             :src="require('@/assets/500602053_banner.png')"
                            slot="title"
                            fit="cover"
                            class="logo"
                        />
                    </van-tab>
                    <van-tab>
                        <van-image           
                             :src="require('@/assets/500146574_wx.png')"
                            slot="title"
                            fit="cover"
                            class="logo"
                        />
                    </van-tab>
                    
            </van-tabs>
            <!-- 个人发布的内容页面 -->
            <div class="user-info" v-for="item in $store.state.tuijian" :key="item.id">
                    <!-- 头像部分 -->
                    <div class="user-logo">
                        <van-image    
                        fit="cover" 
                        round                        
                                :src="item.img" 
                                class="user-image"                                    
                        />
                        <div class="user-miaoshu">
                            <h3>{{item.name}}</h3>
                            <p>{{item.data}}</p>
                        </div>
                    </div>
                    <!-- 内容-->
                    <div class="user-box">
                        <h3 class="txt-title">{{item.title}}</h3>
                        <van-image                             
                                :src="item.back" 
                                class="user-box-image"                                    
                        />
                        <div class="zhuantai">
                            <div class="left">                               
                                <span>{{item.xinxi}}</span>
                                <i class="iconfont iconShape1"></i>
                            </div>
                            <div class="cen">                               
                                <span>{{item.fengxiang}}</span>
                                <i class="iconfont iconShapes1"></i>
                            </div>
                            <div class="right">                           
                               <span>{{item.xihuang}}</span>
                                <i class="iconfont iconLikeIcon1"></i>
                            </div>                           
                        </div>
                    </div>               
                </div>           
        </div>
 </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
    methods:{
        ...mapActions(['gettuijian'])
    },
    created(){
        this.gettuijian()
    }
}
</script>
<style lang="less">
.const{
    text-align: left;
    // 头部下划线
    .van-hairline--bottom::after{
        border: none;
    }
    // 头部部分
    .header{        
        .iconzuojiantou{
                font-size: 40px;
                color: #535353;
                padding-left: 20px;
        }
        .title{
            font-size: 32px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #484747;
        }
        .iconshezhi{
            font-size: 40px;
            color: #535353;
            padding-right: 20px;
        }
    }
    .main{
        .lunbo{
            .van-tabs__nav{
                padding-left: 46px;
                padding-right: 46px;
            }
        }
        .van-tabs__content{
            display: none;
        }
        .van-tabs--line .van-tabs__wrap{
            height: 172px;
        }
        .van-tabs__wrap--scrollable .van-tab{
            padding: 0px 10px;
        }
        .van-tabs__line{
            display: none;
        }
        .logo{
            width: 232px;
            height: 172px;
            img{
                border-radius: 10px;
            }
        }
        // 内容
        .user-info{
            padding: 39px 58px 28px;
            .user-logo{
                display: flex;
                flex-direction: row;
                align-items: flex-end;
                margin-bottom: 15px;
                .user-image{
                    width: 60px;
                    height: 60px;
                    display: block;
                    margin-right: 19px;
                }
                .user-miaoshu{
                    h3{
                        font-size: 22px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        color: #5a5a5b;
                    }
                    p{
                        font-size: 18px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        color: #9b9b9b;
                    }
                }
            }
            // 内容部分
            .user-box{
                .txt-title{
                    font-size: 26px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #4a4a4a;
                    margin-left: 11px;
                    margin-bottom:28px;
                }
                .user-box-image{
                    width: 100%;
                    height: 296px;
                    margin-bottom: 20px;
                    img{
                        border-radius: 8px;
                    }
                }
                .zhuantai{
                    padding: 0px 26px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;                 
                    color: #a6a6b0;
                    .left{
                         display: flex;
                         flex-direction: row;
                         align-items: center;
                    }
                    .cen{
                         display: flex;
                         flex-direction: row;
                         align-items: center;
                    }
                    .right{
                         display: flex;
                         flex-direction: row;
                         align-items: center;
                    }
                    i{
                        font-size: 32px;                                      
                    }
                    span{
                        font-size: 20px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        margin-right: 4px;
                    }
                }
            }
        }
    }
}
</style>
